<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/product/m_city.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/merchant/js/z.citys.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rUoiQA0wNIKkKPYRIynPI7BmHh4v9GPl"></script>
    <title>自提点</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 201523 */
            src: url('//at.alicdn.com/t/font_htd8wkdwlyyfd2t9.eot');
            src: url('//at.alicdn.com/t/font_htd8wkdwlyyfd2t9.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_htd8wkdwlyyfd2t9.woff') format('woff'),
            url('//at.alicdn.com/t/font_htd8wkdwlyyfd2t9.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_htd8wkdwlyyfd2t9.svg#iconfont') format('svg');
        }
        body{background-color: #F0EFF4;}
        .iconfont{
            font-family: iconfont;
        }
        .search{
            padding:10px;
            position: fixed;
            top: 0;
            box-sizing: border-box;
            width: 100%;
            z-index:3;
            background-color: #F0EFF4;
        }
        .search>div{
            display: inline-block;
            width: 100%;
            height: 25px;
            line-height: 25px;
            background-color: white;
            border-radius: 25px;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .search>div>i{
            display: inline-block;
            margin-right: 10px;
            color: #9e9e9e;
        }
        .search>div>input{
            width: -webkit-calc(100% - 35px);
        }
        .container{
            position: relative;
            margin-top: 46px;
        }
        .container>.condition{
            background-color:white;
            padding:10px 0;
            display:-webkit-box;
            color:#676767;
            font-size:14px;
            border-bottom:1px solid #ccc;
            position: fixed;
            top: 45px;
            width: 100%;
            z-index:2;
        }
        ::-webkit-scrollbar{width:0;}
        .store_list{
            position: relative;
            padding-top: 40px;
            width: 100%;
        }
        .container>.condition>li{
            -webkit-box-flex: 1;
            text-align: center;
            border-right:1px solid #ccc;
        }
        .container>.condition>li.current{
            color:#23ADFF;
        }
        .container>.condition>li:last-child{
            border:0;
        }
        .container>.condition>li>i{
            font-family: iconfont;
            font-size:15px;
        }
        .container>.store_list>li{
            padding: 5px 0 5px 10px;
            margin-bottom:10px;
            background-color:white;
        }
        .container>.store_list>li>.store_info>img{
            width: 75px;
            height: 75px;
            display: inline-block;
            border-radius: 4px;
            margin-right: 10px;
        }
        .container>.store_list>li>.store_info>div {
            font-size: 12px;
            display: inline-block;
            width: -webkit-calc(100% - 85px);
            color: #707070;
            line-height: 24px;
            vertical-align: top;
        }
        .container>.store_list>li>.store_info>div>h2{
            font-size: 14px;
            color: #333;
        }
        .container>.store_list>li>.store_info>div>a{
            color: #707070;
        }
        .container>.store_list>li>.store_info>div>a>i{
            color: #0FA7FF;
            font-size: 16px;
            margin-left: 5px;
        }
        .container>.store_list>li>.store_info>div>div{
            overflow: hidden;
        }
        .container>.store_list>li>.store_info>div>div>span:first-child{
            float: left;
            max-width: -webkit-calc(100% - 60px);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .container>.store_list>li>.store_info>div>div>span:last-child{
            float: right;
            width: 60px;
        }
        .container>.store_list>li>.service{
            margin-left: 85px;
            font-size: 12px;
            color: white;
        }
        .container>.store_list>li>.service>span{
            display: inline-block;
            min-width: 40px;
            background-color: #0FA7FF;
            text-align: center;
            border-radius: 3px;
            padding: 2px 5px;
            margin: 5px;
        }
        #m_cityed,#service,#order{
            position: fixed;
            top: 45px;
            height: 40px;
            width: 100%;
            background-color: white;
            z-index:1;
        }
        #m_cityed ul.left{
            width:50%;
            z-index:99;
            float:left;
        }
        #m_cityed ul,#service ul,#order ul{
            margin-top:40px;
            max-height: 280px;
            overflow: scroll;
            background-color: white;
            display:none;
            width: 100%;
            font-size:14px;
        }
        #service ul li,#order ul li{
            height:40px;
            line-height:40px;
            margin-left:10px;
            border-bottom:1px solid #ccc;
        }
        #service ul li:last-child,#order ul li:last-child{
            border:0;
        }
        #m_cityed ul:last-child{
            background-color:#F0EFF4;
        }
        #m_cityed ul:last-child li{
            border-bottom:1px solid #ccc;
        }
        #m_cityed ul:last-child li:last-child{
            border:0;
        }
        #m_cityed ul li{
            height:40px;
            line-height:40px;
            padding: 0 10px;
            position:relative;
            z-index:99;
        }
        #m_cityed ul li.current{
            background-color:#F0EFF4;
        }
        .mask{
            position:fixed;
            top:0;
            background-color:rgba(0,0,0,.6);
            width:100%;
            height:100%;
            display:none;
        }
    </style>
</head>
<body>
    <div class="search">
        <div>
            <i class="iconfont">&#xe601;</i>
            <input type="text" id="search" placeholder="输入自提点名称、电话、地址">
        </div>
    </div>
    <div class="container">
       <ul class="condition">
           <li><span>附近</span><i>&#xe604;</i></li>
           <li><span>服务项目</span><i>&#xe604;</i></li>
           <li><span>排序</span><i>&#xe604;</i></li>
       </ul>
        <div id="m_cityed">
            <ul class="province">
                <li onclick="allStore.clickProvince(this)" data-code="0">附近</li>
            </ul>
            <ul class="city"></ul>
        </div>
        <div id="service">
            <ul>
                <volist name="serviceList" id="service">
                    <li data-id="{$service.id}">{$service.name}</li>
                </volist>
            </ul>
        </div>
        <div id="order">
            <ul>
                <li data-order="juli">离我最近</li>
                <li data-order="name">自提点名称</li>
            </ul>
        </div>
        <ul class="store_list" id="store_list">

        </ul>
        <div class="mask"></div>
    </div>
    <script type="text/html" id="Tpl">
        <%if(results){
            for(var i=0;i<results.length;i++){
                var store = results[i];
        %>
        <li>
            <div class="store_info">
                <img src="<%=store.picUrl%>" onclick="allStore.storeDetail(<%=store.id%>)"/>
                <div>
                    <h2 onclick="allStore.storeDetail(<%=store.id%>)"><%=store.name%></h2>
                    <a href="tel:<%=store.phone%>">电话：<%=store.phone%><i class="iconfont">&#xe600;</i></a>
                    <div>
                        <span><%=store.province%><%=store.city%><%=store.country%><%=store.address%></span>
                        <%if(!store.juli){%>
                            <span></span>
                        <%}else if(store.juli>1000){%>
                            <span>1000+km</span>
                        <%}else{%>
                            <span><%=store.juli%>km</span>
                        <%}%>
                    </div>
                </div>
            </div>
        </li>
        <%}}else{%>
        <div style="text-align: center;color:#333;padding:10px">暂无自提点</div>
        <%}%>
    </script>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var allStore = {
        longitude:0,
        latitude:0,
        isappend:true,
        page:0,
        pageSize:10,
        citycode:null,
        init:function(){
            this.init_city();
            this.initEvent();
            this.initLocation();

        },
        init_city:function(){
            var me = this;
            $.ajax({
                url:'wx_assets/js/product/city.json',
                type:'GET',
                dataType:'json',
                jsonpCallback:'jsonp_location',
                success:function(data){
                    allStore.citycode = data;
                    var province = '';
                    for(var code in data){
                        if(!(code%1e4)){
                            province+='<li onclick="allStore.clickProvince(this)" data-code="'+code+'">'+data[code]+'</li>';
                        }
                    }
                    $(".province").append(province);
                }
            });
        },
        clickProvince:function(ctrl){
            var code = $(ctrl).data("code");
            var citycode = allStore.citycode;
            var city = '';
            if(!code){
                city +='<li onclick="allStore.clickcity(this)" data-km="5">5km</li><li onclick="allStore.clickcity(this)" data-km="10">10km</li><li onclick="allStore.clickcity(this)" data-km="15">15km</li>'
            }else{
                city+='<li onclick="allStore.clickcity(this)" data-code="0">所有地区</li>';
                var  hasCity = false;
                for(var i in citycode){
                    if(i-code<1e4&&i-code>0){
                        if(!(i%100)){
                            hasCity = true;
                            city+='<li onclick="allStore.clickcity(this)" data-code="'+i+'">'+citycode[i]+'</li>';
                        }else if(i-code>9000){
                            hasCity = true;
                            city+='<li onclick="allStore.clickcity(this)" data-code="'+i+'">'+citycode[i]+'</li>';
                        }else if(!hasCity){
                            city+='<li onclick="allStore.clickcity(this)" data-code="'+i+'">'+citycode[i]+'</li>';
                        }

                    }
                }
            }
            $(ctrl).addClass("current").siblings(".current").removeClass("current");
            $(".city").show().html(city);
            $(".mask").show();
            $("#m_cityed ul").addClass("left");
        },
        clickcity:function(ctrl){
            $(ctrl).addClass("current").siblings(".current").removeClass("current");
            if($('.province li.current').data("code")==0){
                var km = $(ctrl).data("km");
                $(".condition li:eq(0)").find("span").text(km+"km");
            }else{
                var city = $(ctrl).text();
                var province = $('.province li.current').text();
                $(".condition li:eq(0)").find("span").text(city);
            }
            this.initList();
            $(".province").hide();
            $(".city").hide();
            $(".mask").hide();
            $("#m_cityed ul").removeClass("left");
            $(".condition li:eq(0)").removeClass("current").find("i").html("&#xe604;");
        },
        initList:function(){
            this.page=0;
            this.isappend=false;
            $.util.pageLoading.show();
            this._loadList(this.page,function(){
                $.util.pageLoading.hide();
            });
        },
        initLocation:function(){
            var me = this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    allStore.longitude = r.point.lng;
                    allStore.latitude = r.point.lat;
                    me.initList();
                }
                else {
                    me.initList();
                }
            },{enableHighAccuracy: true});

        },
        initEvent:function() {
            var me = this;
            $.util.initDataLoading({
                me:allStore,
                lastChildren:function(){
                    return $("#store_list li:last");
                },
                page:function(){
                    return allStore.page;
                },
                pageCount:function(){
                    return allStore.pageCount;
                }
            });
            $("#search").keypress(function(e){
                switch (e.which) {
                    case 13:
                        me.initList();
                        break;
                }
            }).blur(function(){
                if($(this).val()){
                    me.initList();
                }
            });
            $(".condition li:eq(0)").click(function () {
                if ($(".province").is(":hidden")) {
                    $(this).addClass("current").siblings(".current").removeClass("current").find("i").html("&#xe604;");
                    $(this).find("i").html("&#xe60d;");
                    $(".province").show();
                    $("#service ul").hide();
                    $("#order ul").hide();
                    $(".mask").show();
                } else {
                    $(this).removeClass("current").find("i").html("&#xe604;");
                    $(".province").hide();
                    $(".city").hide();
                    $("#m_cityed ul").removeClass("left");
                    $(".mask").hide();
                }
            });
            $(".condition li:eq(1)").click(function () {
                if ($("#service ul").is(":hidden")) {
                    $(this).addClass("current").siblings(".current").removeClass("current").find("i").html("&#xe604;");
                    $(this).find("i").html("&#xe60d;");
                    $(".province").hide();
                    $(".city").hide();
                    $("#m_cityed ul").removeClass("left");
                    $("#order ul").hide();
                    $("#service ul").show();
                    $(".mask").show();
                } else {
                    $(this).removeClass("current").find("i").html("&#xe604;");
                    $("#service ul").hide();
                    $(".mask").hide();
                }
            });
            $("#service li").click(function () {
                var service = $(this).text();
                $(this).addClass("current").siblings(".current").removeClass("current");
                me.initList();
                $(".condition li:eq(1)").find("span").text(service);
                $(".condition li:eq(1)").removeClass("current").find("i").html("&#xe604;");
                $("#service ul").hide();
                $(".mask").hide();
            });
            $(".condition li:eq(2)").click(function () {
                if ($("#order ul").is(":hidden")) {
                    $(this).addClass("current").siblings(".current").removeClass("current").find("i").html("&#xe604;");
                    $(this).find("i").html("&#xe60d;");
                    $(".province").hide();
                    $(".city").hide();
                    $("#m_cityed ul").removeClass("left");
                    $("#service ul").hide();
                    $("#order ul").show();
                    $(".mask").show();
                } else {
                    $(this).removeClass("current").find("i").html("&#xe604;");
                    $("#order ul").hide();
                    $(".mask").hide();
                }
            });
            $("#order li").click(function () {
                $(this).addClass("current").siblings(".current").removeClass("current");
                me.initList();
                var order = $(this).text();
                $(".condition li:eq(2)").find("span").text(order);
                $(".condition li:eq(2)").removeClass("current").find("i").html("&#xe604;");
                $("#order ul").hide();
                $(".mask").hide();
            });
        },
        storeDetail:function(id){
            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=store&method=getStoreDetail&params=%7B%22id%22:'+id+'%7D';
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                        container = $("#store_list");
                if(me.isappend){
                    container.append(html);
                }else{
                    container.html(html);
                }
                me.isappend=true;
                me.page=page;
                me.pageCount=Math.ceil(data.total/me.pageSize);
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            var code = $(".province li.current").data("code");
            if(code>0){
                var province = $(".province li.current").text();
                var city = null;
                if($(".city li.current").data("code")!=0){
                    var city = $(".city li.current").text();
                }
            }else{
                var juli = $(".city li.current").data("km");
            }
            var search = $.trim($("#search").val());
            var serviceId = $("#service li.current").data("id");
            var order = $("#order li.current").data("order");
            if(order=='name'){order='a.name asc';}
            else if(order=='juli'){order= 'juli asc'}
            $.req.get("call.json?module=store&customerId={$customerId}&method=storeList",{
                params: {
                    "search":search,
                    "latitude":me.latitude,
                    "longitude":me.longitude,
                    "province":province,
                    "city":city,
                    "juli":juli,
                    "serviceId":serviceId,
                    "order":order,
                    "start":page,
                    "limit": me.pageSize
                }
            },function(data){
                if(data){
                    me._renderList(data,page,callback);
                }
            });
        }
    };
    allStore.init();
</script>

</body>
</html>